// var allCharts = [];
function initV1(){
    var dom1= document.getElementById('time-usingcar');
    var myChart1 = echarts.init(dom1);
    option = {
        grid: {
            top:10,
            left: '3%',
            right: '10%',
            bottom: '30',
            containLabel: true
        },
        legend: {
          data: ['get', 'return'],
          left: 'center',
          bottom: 1
        },
        xAxis: [
          {
            type: 'value',
            scale: true,
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            splitLine: {
              show: true
            }
          }
        ],
        tooltip:[
          {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          }
        ],
        series: [
          {
            symbolSize: 10,
            name: 'get',
            type: 'scatter',
            emphasis: {
              focus: 'series'
            },
            data: [[4,7], [2,2], [2,2], [2,2], [2,2], [2,2], [2,2], [2,2], [2,2], [2,2]],
          },
          {
            symbolSize: 10,
            name: 'return',
            type: 'scatter',
            emphasis: {
              focus: 'series'
            },
            data: [[4,8], [7,10], [13,30], [16,130], [19,100], [2,2], [2,2], [2,2], [2,2], [2,2]],
          }
        ]
      };
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option);
    return myChart1;
}
function initV2(){
    var dom2=document.getElementById('location-usingcar');
    var myChart2=echarts.init(dom2);
    option = {
        dataset: {
            source: [
                ['number', 'location'],
                [2, '辽宁省大连市高新园区汇贤园11号'],
                [4, '辽宁省大连市高新园区汇贤园10号'],
                [5, '辽宁省大连市高新园区汇贤园9号'],
                [7, '辽宁省大连市高新园区汇贤园8号'],
                [8, '辽宁省大连市高新园区汇贤园7号'],
                
            ]
        },
        grid: {
            top:10,
            left: '3%',
            right: '10%',
            bottom: '30',
            containLabel: true
        },
        xAxis: {name: 'number'},
        yAxis: {type: 'category'},
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        series: [
            {
                type: 'bar',
                
                encode: {
                    // Map the "amount" column to X axis.
                    x: 'amount',
                    // Map the "product" column to Y axis
                    y: 'location'
                }
            }
        ]
    };
    myChart2.setOption(option)
    return myChart2;
}
function initV3(){
    var dom3=document.getElementById('effective-time-usingcar');
    var myChart3=echarts.init(dom3);
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top:10,
            left: '3%',
            right: '4%',
            bottom: '30',
            containLabel: true
        },
        xAxis: [
            {
                "axisLabel":{     //加上这个强制显示
                    interval: 0
                  },
                type: 'category',
                data: ['202108112244', '202108112245', '202108112246', '202108112247', '202108112248'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'time',
                type: 'bar',
                // barWidth: '60%',
                data: [120,100,80,110,90]
            }
        ]
    };
    myChart3.setOption(option)
    return myChart3;
}
function initV4(){
    var dom4=document.getElementById('mileage-usingcar');
    var myChart4=echarts.init(dom4);
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top:10,
            left: '3%',
            right: '4%',
            bottom: '30',
            containLabel: true
        },
        xAxis: [
            {
                "axisLabel":{     //加上这个强制显示
                    interval: 0
                  },
                type: 'category',
                data: ['202108112244', '202108112245', '202108112246', '202108112247', '202108112248'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'mileage',
                type: 'bar',
                // barWidth: '60%',
                data: [120,100,80,110,90]
            }
        ]
    };
    myChart4.setOption(option)
    return myChart4;
}
function initV5(){
    var dom5=document.getElementById('alarm-times');
    var myChart5=echarts.init(dom5);
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top:10,
            left: '3%',
            right: '4%',
            bottom: '30',
            containLabel: true
        },
        xAxis: [
            {
                "axisLabel":{     //加上这个强制显示
                    interval: 0
                  },
                type: 'category',
                data: ['202108112244', '202108112245', '202108112246', '202108112247', '202108112248'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'number',
                type: 'bar',
                // barWidth: '60%',
                data: [1,2,0,5,2]
            }
        ]
    };
    myChart5.setOption(option)
    return myChart5;
}
function initV6(){
    var dom6=document.getElementById('fence-alarm-times');
    var myChart6=echarts.init(dom6);
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top:10,
            left: '3%',
            right: '4%',
            bottom: '30',
            containLabel: true
        },
        xAxis: [
            {
                "axisLabel":{     //加上这个强制显示
                    interval: 0
                  },
                type: 'category',
                data: ['202108112244', '202108112245', '202108112246', '202108112247', '202108112248'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'number',
                type: 'bar',
                // barWidth: '60%',
                data: [2,1,1,0,3]
            }
        ]
    };
    myChart6.setOption(option)
    return myChart6;
}
function initV7(){
    var demo7=document.getElementById('speed-1');
    var myChart7=echarts.init(demo7);
    var option = {
        legend: {
            show:true,
            x: 'center', // 'center' | 'left' | {number},
            y: 'bottom', // 'center' | 'bottom' | {number}
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top:10,
            left: '3%',
            right: '4%',
            bottom: '30',
            containLabel: true
        },
        dataset: {
            source: [
                ['product', 'max', 'min', 'avg'],
                ['20210828112244', 120, 60, 80],
                ['20210828112245', 100,40,50],
                ['20210828112246', 80,30,60],
                ['20210828112247', 110,60,70],
                ['20210828112248',90,50,60]
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
        ]
    };
    
    myChart7.setOption(option);
    return myChart7;
}
function initV8(){
    var demo8=document.getElementById('speed-2');
    var myChart8=echarts.init(demo8);
    var option = {
        legend: {
            show:true,
            x: 'center', // 'center' | 'left' | {number},
            y: 'bottom', // 'center' | 'bottom' | {number}
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top:10,
            left: '3%',
            right: '4%',
            bottom: '30',
            containLabel: true
        },
        dataset: {
            source: [
                ['product', 'max', 'min', 'avg'],
                ['20210828112244', 2, 5, 8],
                ['20210828112245', 30,5,10],
                ['20210828112246', 60,10,30],
                ['20210828112247', 20,5,1],
                ['20210828112248',10,10,10]
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
        ]
    };
    
    myChart8.setOption(option);
    return myChart8;
}
function initV9(){
    var demo9=document.getElementById('referrer-order-number');
    var myChart9=echarts.init(demo9);
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
            confine:true

        },
        legend: {
            show:true,
            x: 'center', // 'center' | 'left' | {number},
            y: 'bottom', // 'center' | 'bottom' | {number}
            data: ['Amy', 'Tom', 'Jim', 'Tony', 'Mary']
        },
        series: [
            {
                name: 'number',
                type: 'pie',
                radius: '40%',
                center: ['50%', '40%'],
                data: [
                    {value: 335, name: 'Amy'},
                    {value: 310, name: 'Tom'},
                    {value: 234, name: 'Jim'},
                    {value: 135, name: 'Tony'},
                    {value: 1548, name: 'Mary'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                // label: {
                //     normal: {
                //         position: "inside"//此处将展示的文字在内部展示
                //     }
                // },
            }
        ]
    };
    
    myChart9.setOption(option);
    return myChart9;
}
function initV10(){
    var demo10=document.getElementById('referrer-order-time');
    var myChart10=echarts.init(demo10);
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            show:true,
            x: 'center', // 'center' | 'left' | {number},
            y: 'bottom', // 'center' | 'bottom' | {number}
            data: ['Amy', 'Tom', 'Jim', 'Tony', 'Mary']
        },
        series: [
            {
                name: 'number',
                type: 'pie',
                radius: '40%',
                center: ['50%', '40%'],
                data: [
                    {value: 335, name: 'Amy'},
                    {value: 310, name: 'Tom'},
                    {value: 234, name: 'Jim'},
                    {value: 135, name: 'Tony'},
                    {value: 1548, name: 'Mary'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    
    myChart10.setOption(option);
    return myChart10;
}
function initV11(){
    var demo11=document.getElementById('referrer-order-mileage');
    var myChart11=echarts.init(demo11);
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            show:true,
            x: 'center', // 'center' | 'left' | {number},
            y: 'bottom', // 'center' | 'bottom' | {number}
            data: ['Amy', 'Tom', 'Jim', 'Tony', 'Mary']
        },
        series: [
            {
                name: 'number',
                type: 'pie',
                radius: '40%',
                center: ['50%', '40%'],
                data: [
                    {value: 335, name: 'Amy'},
                    {value: 310, name: 'Tom'},
                    {value: 234, name: 'Jim'},
                    {value: 135, name: 'Tony'},
                    {value: 1548, name: 'Mary'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    
    myChart11.setOption(option);
    return myChart11;
}
function initV12(){
    var demo12=document.getElementById('referrer-order-payment');
    var myChart12=echarts.init(demo12);
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            show:true,
            x: 'center', // 'center' | 'left' | {number},
            y: 'bottom', // 'center' | 'bottom' | {number}
            data: ['Amy', 'Tom', 'Jim', 'Tony', 'Mary']
        },
        series: [
            {
                name: 'number',
                type: 'pie',
                radius: '40%',
                center: ['50%', '40%'],
                data: [
                    {value: 335, name: 'Amy'},
                    {value: 310, name: 'Tom'},
                    {value: 234, name: 'Jim'},
                    {value: 135, name: 'Tony'},
                    {value: 1548, name: 'Mary'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    
    myChart12.setOption(option);
    return myChart12;
}
function initOrderMileage(){
    var dom13=document.getElementById('orders-mileage');
    var myChart13=echarts.init(dom13);
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top:10,
            left: '3%',
            right: '4%',
            bottom: '30',
            containLabel: true
        },
        xAxis: [
            {
                "axisLabel":{     //加上这个强制显示
                    interval: 0
                  },
                type: 'category',
                data: ['202108112244', '202108112245', '202108112246', '202108112247', '202108112248'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'mileage',
                type: 'bar',
                // barWidth: '60%',
                data: [120,100,80,110,90]
            }
        ]
    };
    myChart13.setOption(option)
    return myChart13;
}
function resizeAllCharts(){
    //resize方式2
    // var compareChart = echarts.getInstanceByDom(document.getElementById("time-usingcar"));
    // compareChart.resize();

    var allChartsDom = document.getElementsByClassName("speed-chart");//class
    for (var i = 0; i < allChartsDom.length; i++) {
        var chatsDom = allChartsDom[i];
        var compareChart = echarts.getInstanceByDom(chatsDom);
        if(compareChart){
            compareChart.resize();
        }
    }

   
    // allCharts.forEach(chats => {
    //     chats.resize();
    // });
}
$(function(){
    var chats = 　initV1();
    initV2();
    initV3();
    initV4();
    initV5();
    initV6();
    initV7();
    initV8();
    initV9();
    initV10();
    initV11();
    initV12();
    initOrderMileage();
    //resize 方式1
    // allCharts.push(chats);
});
window.onresize = function(){
    resizeAllCharts();
};
    
